import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Icon } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class InputNumber extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	value: 1
        }
    }
    onClickMinus() {
    	if(this.state.value > 1) {
    		this.setState({
	    		value: this.state.value - 1
	    	})
    	}
    }
    onClickPlus() {
    	this.setState({
    		value: this.state.value + 1
    	})
    }
    onInputChange() {
    	
    }
	render() {

	 	return (
	 		<div className={styles["input-number"]}>
	 			<div 
	 				onClick={this.onClickMinus} 
	 				className={`${styles["input-number-item"]} ${styles['input-number-minus']}`}
	 				style={ this.state.value <= 1 ? {color: '#ccc'} : null}
	 				>
	 				<Icon type="minus" />
	 			</div>
	 			<div className={`${styles["input-number-item"]} ${styles["input-number-input"]}`}>
	 				<input onChange={this.onInputChange} style={{width: '0.40rem'}} value={this.state.value}/>
	 			</div>
	 			<div onClick={this.onClickPlus} className={`${styles["input-number-item"]} ${styles["input-number-plus"]}`}>
	 				<Icon type="plus" />
	 			</div>
	 		</div>
	  	);
	}
};

InputNumber.propTypes = {
};

export default InputNumber
